Chips 標籤小元件

有四種型別操作項): Assist 輔助型、filter 篩選型、input 輸入型和Suggestion建議型

Updates 更新

顏色簡單，提升文字與按鈕之間的視覺層級
M2
M3

Assist chip  輔助元件

1 Container 2 Label test 3 Leading icon
1 Enabled 已啟用 2 Disabled 已禁用 3 Hovered 懸停 4 Focused 已聚焦 5 Pressed 按下 6 拖動中

Assist chip measurements  輔助元件測量

Attribute  屬性Value  值
Height  高度32dp
Shape  形狀8dp 圓角半徑
Icon size  圖示大小18dp
Vertical label text alignment垂直標籤文字對齊方式Center-aligned  居中對齊
Horizontal label text alignment水平標籤文字對齊方式Start-aligned  起始對齊
Left/right padding  左右內邊距16dp
Left/right padding with-icon帶圖示左/右內邊距8dp
Padding between elements元素之間的間距8dp

Filter chip  過濾元件

1 Container 2 Label test 3 Leading icon 4 Trailing icon
1 Enabled 已啟用 2 Disabled 已禁用 3 Hovered 懸停 4 Focused 已聚焦 5 Pressed 按下 6 拖動中
Attribute  屬性Value  值
Container height  容器高度32dp
Container shape  容器形狀8dp 圓角半徑
Icon size  圖示大小18dp
Vertical label text alignment垂直標籤文字對齊方式Center-aligned  居中對齊
Horizontal label text alignment水平標籤文字對齊方式Start-aligned  起始對齊
Left/right padding  左右內邊距16dp
Left/right padding with icon帶圖示的左右內邊距8dp
Padding between elements元素之間的間距8dp

Input chip  輸入元件

1 Container 容器 2 Label text 標籤文字 3 Trailing icon 尾部圖示 4 Leading icon 前置圖示
1 Enabled 已啟用 2 Disabled 已禁用 3 Hovered 懸停 4 Focused 已聚焦 5 Pressed 按下 6 拖動中
Attribute  屬性Value  值
Container height  容器高度32dp
Container shape  容器形狀8dp 圓角半徑
Icon size  圖示大小18dp
Avatar shape  頭像形狀12dp 圓角半徑
Avatar size  頭像大小24dp
Vertical label text alignment垂直標籤文字對齊方式Center-aligned  居中對齊
Horizontal label text alignment水平標籤文字對齊方式Start-aligned  起始對齊
Left padding for avatar頭像左內邊距4dp
Right padding for avatar頭像右內邊距8dp
Left/right padding for icon圖示左/右內邊距8dp
Padding between elements元素之間的間距8dp
Target size for close icon關閉圖示目標大小Min 48dp

Suggestion chip  建議元件

1 Container 容器 2 Label text 標籤文字
1 Enabled 已啟用 2 Disabled 已禁用 3 Hovered 懸停 4 Focused 已聚焦 5 Pressed 按下 6 拖動中
Attribute  屬性Value  值
Container height  容器高度32dp
Container shape  容器形狀8dp 圓角半徑
Icon size  圖示大小18dp
Vertical label text alignment垂直標籤文字對齊方式Center-aligned  居中對齊
Horizontal label text alignment水平標籤文字對齊方式Start-aligned  起始對齊
Left/right padding without icon無圖示時的左右內邊距16dp
Left/right padding with icon帶圖示的左右內邊距8dp
Padding between elements元素之間的間距8dp